<template>
	<div>
		<h3>姓名：{{ person.name }}</h3>
		<h3>年龄：{{ person.age }}</h3>
		<button @click="editAge">年龄+1</button>
	</div>
</template>

<script setup lang="ts" name="App">
	import {ref,reactive,toRaw,markRaw} from 'vue'
	let person=reactive({
		name:"mi",
		age:18
	})
	
	function editAge(){
		person.age+=1
	}

	console.log("响应式数据：",person);
	console.log("原始数据:",toRaw(person));

	let car=markRaw({brand:"mi",price:200})
	let car2=reactive(car)
	console.log("car:",car);
	console.log("car2:",car2);

	

</script>

<style>
	.wraper .title {
		padding: 20px;
		text-align: center;
		min-width: 610px;
	}
	.wraper .small{
		font-size: 15px;
	}
	.wraper .list-group-item {
		min-width: 230px;
	}
</style>